<template>
    <div>
        <div class='switchli'>
            <ul>
                <li>
                    <a @click="chooseM('menu')">菜 单</a>
                </li>
                <li>
                    <a @click="chooseM('tips')">标 签</a>
                </li>
                <li>
                    <a @click="chooseM('friend')">友 链</a>
                </li>
                <li>
                    <a @click="chooseM('valor')">华 洛</a>
                </li>
            </ul>
        </div>
        <div class='switchmain'>
            <transition-group name='myFadeRight' mode="out-in">
                <Menu v-show="choose=='menu'" :key='choose+"Menu"'></Menu>
                <Tips v-show="choose=='tips'" :key='choose+"Tips"'></Tips>
                <valor v-show="choose=='valor'" :key='choose+"valor"'></valor>
                <Friend v-show="choose=='friend'" :key='choose+"Friend"'></Friend>
            </transition-group>
        </div>
    </div>
</template>
<script>
import Menu from '@/components/switch/menu'
import Tips from '@/components/switch/tips'
import Friend from '@/components/switch/friend'
import Valor from '@/components/switch/valor'
// import 'vue2-animate/dist/vue2-animate.min.css'
export default {
  name: 'SwitchBtn',
  data () {
    return {
      choose: 'menu'
    }
  },
  methods: {
    chooseM (arg) {
      this.choose = arg
    }
  },
  components: {
    Menu,
    Tips,
    Friend,
    Valor
  }
}
</script>
<style scoped lang='less'>
.switchli {
    margin-bottom: 1.5rem;
}
.switchli ul{
    display: flex;
    justify-content:space-between;
    padding: 1rem .5rem 0;
    height: 24px;
    align-items: center;
}
.switchli ul li{
    width: 100%;
    height: 100%;
    background: rgba(123,93,95,.7);
    border-radius: 4px;
    margin: 0 4px;
    line-height: 24px;
    transition: .5s all ease;
    /* transform-style: preserve-3d; */
    transform: perspective(700px) translateY(0px) translateZ(0px);
}
.switchli ul li:hover{
    cursor: pointer;
    transform:translateY(-3px) translateZ(200px);
    box-shadow: 0 5PX 5PX rgba(123,93,95,.7);
    background: rgba(123,93,95,1);
}
.switchmain {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 200px;
    padding: 0 .5rem;
    box-sizing: border-box;
}
a {
    text-decoration:none;
    color: #FFF;
    outline:none;
    display: block;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 800px) {
    .switchmain {
        width: 100%;
        height: 10rem;
    }
}

.myFadeRight-enter-active {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}
</style>
